<!--
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 * No deletion without permission, or be held responsible to law.
 * @author YDZ
-->
<template>
  <BasicDrawer v-bind="$attrs" :showFooter="true" @register="registerDrawer" @ok="handleSubmit" width="60%">
    <template #title>
      <Icon :icon="getTitle.icon" class="pr-1 m-1" />
      <span> {{ getTitle.value }} </span>
    </template>
    <BasicForm @register="registerForm" />
  </BasicDrawer>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsOrtherDeviceDeviceInfoForm',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, ref, computed } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { DeviceInfo, deviceInfoSave, deviceInfoForm } from '/@/api/orther/device/deviceInfo';

  const emit = defineEmits(['success', 'register']);

  const { t } = useI18n('orther.device.deviceInfo');
  const { showMessage } = useMessage();
  const record = ref < DeviceInfo > ({} as DeviceInfo);
  const getTitle = computed(() => ({
    icon: router.currentRoute.value.meta.icon || 'ant-design:book-outlined',
    value: t('监控设备'),
  }));

  const [registerForm, { resetFields, setFieldsValue, validate, setProps }] = useForm();

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    setDrawerProps({ loading: true });
    await resetFields();
    record.value = data
    record.value.__t = new Date().getTime();
    await setProps({
      labelWidth: 130,
      schemas: [
        {
          label: t('播放地址'),
          field: 'url',
          component: 'RadioGroup',
          componentProps: {
            options: [
              { label: '高清', value: data.previewUrlHd },
              { label: '流畅', value: data.previewUrlSd },
            ],
          },
          required: true,
        },
        {
          label: t('UIKIT主题模板'),
          field: 'uikitTemplate',
          component: 'RadioGroup',
          componentProps: {
            dictType: 'zf_device_uikit',
          },
          required: true,
        },
      ],
      baseColProps: { lg: 24, md: 24 },
    })

    setFieldsValue(record.value);
    setDrawerProps({ loading: false });
  });

  async function handleSubmit() {
    try {
      const data = await validate();
      setDrawerProps({ confirmLoading: true });
      // const params: any = {
      //   isNewRecord: record.value.isNewRecord,
      //   deviceSerial: record.value.deviceSerial,
      // };
      // // console.log('submit', params, data, record);
      // const res = await deviceInfoSave(params, data);
      // showMessage(res.message);
      setTimeout(closeDrawer);
      emit('success', data);
    } catch (error: any) {
      if (error && error.errorFields) {
        showMessage(t('您填写的信息有误，请根据提示修正。'));
      }
      console.log('error', error);
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  }
</script>